<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>新建记录</title>
    <link rel="stylesheet" href="../../lib/layui/layui/css/layui.css">
    <script type="text/javascript" src="../../js/news/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="../../lib/layui/layui/lay/dest/layui.all.js"></script>
    <script src="../../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../lib/layui/layui/layui.js?20200918"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.ui.widget.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.iframe-transport.js" type="text/javascript"
            charset="utf-8"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.fileupload.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/ajaxupload.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jquery.form.min.js"></script>
    <script type="text/javascript" src="/js/common/fileupload.js"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <style>
        * {
            font-family: "Microsoft Yahei" !important;
            overflow-y: hidden;
        }

        nav button {
            margin-left: 5px;
            padding: .25rem .5rem;
            font-size: .875rem;
            border-radius: .2rem;
            float: right !important;
            margin-top: 10px
        }

        nav div {
            float: left !important;
            margin: 15px;
        }

        nav {
            height: 50px;
            border-bottom: 1px solid #cfdbe2;
            background-color: #fafbfc;
            border-radius: 0;
        }

        .layui-tab {
            margin: 0;
        }

        .content {
            height: 544px;
            overflow: auto;
            margin: 14px;
            padding: 14px;
            background: #fff;
        }

        .layui-tab-content {
            background-color: #F5F7FA;
        }

        .search {
            display: inline;
            margin-bottom: 1px;
            padding-top: 6px;
            padding-bottom: 6px;
            width: 185px;
            border: 0;
        }

        .spanText {
            margin-top: 25px;
            display: inline-block;
            margin-right: 5px;
            background: #e8e8e8;
            color: #333;
            border-radius: 30px;
            line-height: 27px;
            padding-left: 20px;
            padding-right: 20px;
            position: relative;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .layui-form-item .layui-input-inline {
            width: 25%;
        }

        .layui-table-view .layui-form-radio {
            line-height: inherit;
        }
        .forbid{
            background-color:gainsboro ;
        }
    </style>
</head>
<body>
<form class="layui-form form" action="">
    <nav>
        <div>新建记录</div>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="history.go(-1)"
                style="margin-right: 30px">
            返回
        </button>
        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm addBtn">保存</button>
    </nav>
    <div>
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <div class="layui-tab-content ">
                <div class="content">
                    <div class="layui-form-item">
                        <label class="layui-form-label ">关联计划</label>
                        <div class="layui-input-block layui-input-inline scheme">
                            <div class="layui-input-inline;border-bottom: 1px solid #ccc" style="display:inline">
                                <input type="text" style="border-bottom: 1px solid #ccc;" class="search parent"
                                       placeholder="搜索"/>
                                <span style="padding: 5px;color: #999;cursor: pointer;margin-left:-26px"><i
                                        class="layui-icon layui-icon-search master"></i></span>
                            </div>
                        </div>
                        <label class="layui-form-label " style="width: 105px">收支产生时间</label>
                        <div class="layui-input-block layui-input-inline">
                            <input type="tel" name="phone" id="time" lay-verify="required|phone" autocomplete="off"
                                   class="layui-input">
                        </div>


                    </div>
                    <div>
                        <div class="layui-form-item">
                            <label class="layui-form-label ">支出预算</label>
                            <div class="layui-input-block layui-input-inline">

                                <input disabled="disabled" type="text" name="expenseBudget" lay-verify="title" autocomplete="off"
                                       placeholder="" class="layui-input forbid">
                            </div>
                            <label class="layui-form-label ">收入预估</label>
                            <div class="layui-input-block layui-input-inline" style="margin-left: 135px">
                                <input disabled="disabled" type="text" name="incomeBudget" lay-verify="title" autocomplete="off"
                                       placeholder="" class="layui-input forbid">
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="layui-form-item">
                            <label class="layui-form-label ">已支出</label>
                            <div class="layui-input-block layui-input-inline">

                                <input disabled="disabled" type="text" name="Spent" lay-verify="title" autocomplete="off"
                                       placeholder="" class="layui-input forbid">
                            </div>
                            <label class="layui-form-label ">已收入</label>
                            <div class="layui-input-block layui-input-inline" style="margin-left: 135px">
                                <input disabled="disabled" type="text" name="Earned" lay-verify="title" autocomplete="off"
                                       placeholder="" class="layui-input forbid">
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="layui-form-item">
                            <label class="layui-form-label ">支出金额</label>
                            <div class="layui-input-block layui-input-inline">

                                <input  type="number" name="expense" lay-verify="title" autocomplete="off" placeholder=""
                                       class="layui-input">
                            </div>
                            <label class="layui-form-label ">收入金额</label>
                            <div class="layui-input-block layui-input-inline" style="margin-left: 135px">
                                <input  type="number" name="income" lay-verify="title" autocomplete="off" placeholder=""
                                       class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">相关附件</label>
                            <div class="layui-input-block" style="width: 190px ;margin-left: 220px">
                                <button id="uploadimg" type="button" class="layui-btn"><i class="layui-icon">&#xe67c;</i>上传附件
                                </button>
                                <div id="Attachment" style="padding-bottom: 10px"></div>
                                <input type="hidden" name="attachmentId" autocomplete="off" class="layui-input">
                                <input type="hidden" name="attachmentName" autocomplete="off"
                                       class="layui-input">

                                <input type="file" multiple="multiple" name="file" id="uploadinputimg"
                                       class="w-icon5"
                                       style="position: absolute;opacity: 0;width: 95px;top: 0px;left:0px;height:40px;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0)">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">计划描述</label>
                        <div class="layui-input-block" style="margin-left: 220px">
                            <textarea id="reasons" name="recordDesc" style="display: none;"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
</body>
<script>
    $('.content').height($(window).height() - 130);
    var userId='';
    $('.classBtn').click(function () {
        $(this).toggleClass("one")
        $(this).siblings('button').removeClass("one");
    });
    $('#uploadinputimg').click(function () {
        $('.form').attr('action','/upload?module=revenue')
        fileuploadFn('#uploadinputimg', $('#Attachment'));
    })


    //附件删除
    $('#Attachment').on('click','.deImgs',function(){
//        var data=$(this).parents('.dech').attr('deUrl');
        var dome=$(this).parents('.dech');
        layer.confirm('确定要删除吗？', {
            btn: ['确定','取消'], //按钮
            title:"删除附件"
        }, function(){
            dome.remove();
            layer.msg('删除成功', { icon:6});
            layer.closeAll();
        })
//        deleteChatment(data,dome);
    })

    $(function () {
        $.ajax({
            url: '/portals/selPortalsUser',
            type: 'get',
            dataType: 'json',
            success: function (data) {
                userId=data.object.userId
            }
        });
    })
    layui.use(['form', 'layedit', 'laydate', 'table', 'upload'], function () {
        var form = layui.form
            , layer = layui.layer
            , laydate = layui.laydate
            , layedit = layui.layedit
            , table = layui.table
            , upload = layui.upload;
        var index=layedit.build('reasons',{
            uploadImage: {url: '/upload?module=revenue', type: 'post'}
        }); //建立编辑器
        form.render();
        //日期
        laydate.render({
            elem: '#time',
            type:'datetime'
        });

        $('.addBtn').click(function () {
            //获取附件id和name
            var attachmentId='';
            var attachmentName='';
            for(var i=0;i<$('#Attachment .inHidden').length;i++){
                attachmentId += $('#Attachment .inHidden').eq(i).val();
            }
            for(var i=0;i<$('#Attachment .inHidden').length;i++){
                attachmentName += $('#Attachment a').eq(i).attr('NAME');
            }
            var data = {
                planId:$('.parentid').attr('planId'),
                recordTime: $('#time').val(),
                expense: $('[name="expense"]').val(),
                income: $('[name="income"]').val(),
                expenseBudget: $('[name="expenseBudget"]').val(),
                incomeBudget: $('[name="incomeBudget"]').val(),
                Spent: $('[name="Spent"]').val(),
                Earned: $('[name="Earned"]').val(),
                recordDesc: layedit.getContent(index),
                attachmentId:attachmentId,
                attachmentName:attachmentName,
                creator:userId,
            };
            $.ajax({
                url: '/IncomeRecords/editRecords',
                type: 'post',
                dataType: 'json',
                data: data,
                success: function (data) {
                    layer.msg('保存成功!')
                    history.go(-1)
                }
            });
        })
        $('.master').click(function () {
            var planId = $('.parentid').attr('planId');
            layer.open({
                type: 1,
                title: ['计划选择'],
                area: ['750px', '640px'],
                shadeClose: true, //点击遮罩关闭
                content: //                '<div>' +
//                '<input style="width: 200px;margin:20px 0 0 20px;padding-left: 10px;height: 30px" placeholder="搜索方案"/><i class="layui-icon layui-icon-search flowIcon" style="margin-left: -30px"></i></div>' +
                '<div style="margin:0 20px 0 20px;">' +
                '<table class="layui-hide" id="flowTable"></table>' +
                '</div>',
                btn: ['确定']
                , success: function (data) {
                    table.render({
                        elem: '#flowTable'
                        , url: '/IncomePlan/findIncomePlan'
                        ,where:{
                            planStatus:'1'
                        }
                        , cellMinWidth: 80
                        , cols: [[
                            {type: 'radio'}
                            , {field: 'planTypeName', title: '计划类型'}
                            , {field: 'planName', title: '计划名称'}
                        ]]
                        , page: true
                        , done: function (obj) {
                            $("[data-field='id']").css('display', 'none');
                            var data = obj.data;
                            for (var i = 0; i < data.length; i++) {
                                if (String(data[i].planId) === planId) {
                                    var index = data[i]['LAY_TABLE_INDEX'];
                                    $('div[lay-id="flowTable"] tr[data-index="' + index + '"] input[type="radio"]').prop('checked', true);
                                    $('div[lay-id="flowTable"] tr[data-index="' + index + '"] input[type="radio"]').next().addClass('layui-form-checked');
                                    data[i].LAY_CHECKED = true;
                                }
                            }
                            form.render();
                        }
                        , parseData: function (res) { //res 即为原始返回的数据
                            return {
                                "code": 0, //解析接口状态
                                "data": res.obj  //解析数据列表
                            };
                        }
                    });
                    $('.flowIcon').click(function () {
                        var search = $(this).siblings('input').val()
                        if (search != '') {
                            table.reload('flowTable', {
                                url: '/contract/selectContractBy',
                                method: 'get',
                                where: {
                                    cha: search
                                }
                            })
                        }
                    });
                },
                yes: function (index) {
                    var checkStatus = table.checkStatus('flowTable')  // 打开页面中的table ID
                        , data = checkStatus.data;     //  这个data一直为 []
                    if (data != '') {
                        var str = '';
                        var planId = ''
                        for (var i = 0; i < data.length; i++) {
                            $('.spanText').remove();
                            $('.add-item').remove();
                            planId = data[i].planId
                            str = '<span class="spanText parentid" planId="' + data[i].planId + '" style="margin-top:5px;position:relative">' + data[i].planName + '<a style="color: darkgrey;cursor:pointer;margin-left: 5px;" title="取消" class="cancel">×</a></span>' +
                                '<span class="add-item" style="vertical-align: 7px;"><i class="layui-icon layui-icon-add-circle"></i></span>'
                        }
                        $('.parent').parent().prepend(str);
                        $('.parent').hide();
                        $('.parent').siblings().last().hide();
                        $('.add-item').click(function () {
                            $('.parent').show();
                            $('.parent').siblings().last().show();
                        });
                        $('.cancel').click(function () {
                            $(this).parents('.spanText').remove();
                            $('.add-item').remove();
                            if ($(this).siblings('.spanText').length == 0) {
                                $('.parent').show();
                                $('.parent').siblings().last().show();
                            }
                        });
                        layer.close(index)

                        $.ajax({
                            url: "/IncomePlan/findIncomePlanById",
                            type: "get",
                            data: {
                                planId: planId
                            },
                            dataType: 'json',
                            success: function (data) {
                                $('[name="Earned"]').val(data.object['map'].Earned)
                                $('[name="Spent"]').val(data.object['map'].Spent)
                                $('[name="expenseBudget"]').val(data.object.expenseBudget)
                                $('[name="incomeBudget"]').val(data.object.incomeBudget)
                            }
                        });
                    }
                }
            })

        })
    });

</script>

</html>
